<script setup>
import { artGetChannelService, artDelChannelService } from '@/api/article';
import { Edit, Delete } from '@element-plus/icons-vue'
import ChannelEidt from './components/ChannelEidt.vue';
const dialog = ref()
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
const loading = ref(false)
const channelList = ref([])

const getChannel = async () => {
    loading.value = true
    const res = await artGetChannelService()
    channelList.value = res.data.data
    loading.value = false
    console.log(channelList.value);

}
getChannel()

const onDelChannel = async (row) => {
    // row 打印的是当前行的所有信息，即v-for中的item项
    // console.log(row);
    await ElMessageBox.confirm(
        '你确认删除该分类信息吗？',
        '温馨提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
    await artDelChannelService(row.id)
    ElMessage.success('删除成功')
    getChannel()





}
const onEditChannel = (row) => {
    // row 打印的是当前行的所有信息，即v-for中的item项
    // console.log(row, $index);
    dialog.value.open(row)


}
const onAddChannel = () => {
    dialog.value.open({})
}
// 监听子组件 
const onSonSucess = () => {
    getChannel()
}

</script>
<template>
    <page-container title="文章分类">
        <!-- 具名插槽的使用 -->
        <template #extra>
            <el-button type="primary" @click="onAddChannel">添加分类</el-button>
        </template>
        <!-- 主题内容直接写  因为有默认插槽 -->
        <el-table v-loading="loading" :data="channelList" style="width: 100%;">
            <el-table-column label="序号" width="100" type="index"></el-table-column>
            <el-table-column label="分类名称" prop="cate_name"></el-table-column>
            <el-table-column label="分类别名" prop="cate_alias"></el-table-column>
            <el-table-column label="操作" prop="操作" width="150">
                <template #default="{ row, $index }">
                    <el-button type="primary" :icon="Edit" circle plain @click="onEditChannel(row, $index)" />
                    <el-button type="danger" :icon="Delete" circle plain @click="onDelChannel(row, $index)" />
                </template>
            </el-table-column>
            <template #empty>
                <el-empty description="没有数据" />
            </template>
        </el-table>
        <ChannelEidt ref="dialog" @sucess="onSonSucess"></ChannelEidt>

    </page-container>
</template>